<template>
  <cml-module-item
    :title="titleText"
    :titleMore="titleMore"
    v-bind="$attrs"
    v-on="$listeners"
  >
    <a-switch
      size="small"
      :disabled="false"
      :checked="isStart"
      @change="change"
    />
    <!-- <template v-slot:detail>
      <gesture-recognize-more></gesture-recognize-more>
    </template> -->
  </cml-module-item>
</template>
<script>
import { Switch } from 'ant-design-vue'
import CmlModuleItem from '../../cml-module-item'
import GestureRecognizeMore from './morePanel'
import * as anov from 'anov-core'

export default {
  name: 'GestureRecognize',
  components: {
    ASwitch: Switch,
    CmlModuleItem,
    GestureRecognizeMore
  },
  model: {},
  props: {},
  data() {
    return {}
  },
  computed: {
    ...anov.gestureRecognizeServer.mapState(['isStart']),
    ...anov.envServer.mapState(['videoStatus']),
    titleText() {
      return this.$t('cmlpanel.gestures')
    },
    titleMore() {
      return this.$t('cmlpanel.gestures')
    }
  },
  watch: {
    isStart(v) {
      this.change(v)
      let msg =
        this.titleText +
        (v ? this.$t('cmlpanel.start') : this.$t('cmlpanel.stop'))
      anov.voiceFeedbackServer.speak(msg)
      app.msg({type: 'info', content: msg})
    }
  },
  created() {},
  mounted() {
    //初始化状态
    this.change(this.isStart)

    anov.gestureRecognizeServer.addEventListener(
      'gestureMatch',
      this.onGestureMatch.bind(this)
    )
  },
  beforeDestroy() {},
  methods: {
    change(isStart) {
      if (isStart == this.isStart) return
      if (isStart) {
        if (!this.videoStatus) {
          app.msg({type: 'error', content: '未检测到摄像头，无法开启手势识别'})
          return
        }
        //启动
        anov.gestureRecognizeServer.start()
      } else {
        //关闭
        anov.gestureRecognizeServer.stop()
      }
    },
    onGestureMatch(e) {
      let gesture = e.result
      if (gesture.up) {
        // this.$router.forward()
      } else if (gesture.down) {
        //this.$router.back()
      } else if (gesture.left) {
        app.pageServer.go(-1)
        anov.gestureRecognizeServer.addInfo('切换到上一个菜单')
      } else if (gesture.right) {
        app.pageServer.go(1)
        anov.gestureRecognizeServer.addInfo('切换到下一个菜单')
      }
    }
  }
}
</script>
<style lang="scss" scoped></style>
